<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  <title>Document</title>
</head>

<body>
<div>
  <h1>微信公众号的二维码+扫码登录页面</h1>
  <hr />
  <div class="qrCode" v-loading="loadCode" element-loading-text="拼命加载中">
    <iframe class="wh100 box" src="./qrCode.html"></iframe>
  </div>

</div>

<script>

  var vm = new Vue({
    el: '#app',
    data() {
      return {
        loadCode: true,
      }
    },
    created() {
      let timer = setTimeout(() => {
        // 轮询后台，看用户是否扫码成功
        this.loopFun()
        clearTimeout(timer);
      }, 2000)


    },
    methods: {
      sleep(dealy) {
        return new Promise((res, rej) => {
          let tm = setTimeout(() => {
            clearTimeout(tm)
            res()
          }, dealy)
        })
      },
      async loopFun() {
        // 根据本地存储的myid区分用户,在生成二维码的时候存储的，也传给后台了
        let myid = sessionStorage.getItem('myid') || 'a'
        console.log('myid', myid);
        const that = this;
        $.ajax({
          type: "get",
          async: true,
          url: "./Login",
          type: 'GET',
          data : { "myid" : myid },
          dataType: 'json',
          // dataType: ($.browser.msie) ? "text" : "xml",
          success: function (res) {
            console.log('是否登录：', res);
            // 如果还没登录，休眠3s再问一次
            if (!res) {
              // 休眠3s
              const t = setTimeout(() => {
                clearTimeout(t);
                that.loopFun()
              }, 3000)

            } else {
              window.location.href = './home.html'
            }
          },
          error: function (error) {
            console.error('报错：', error);
          }
        });
      }
    }
  })

</script>

<style scoped>
  .wh100 {
    width: 100%;
    height: 100%;
  }

  .box {
    border: none;
    overflow: hidden;
  }

  .qrCode {
    border: 1px solid #ddd;
    width: 430px;
    height: 430px;
    margin: 20px auto;
  }
</style>
</body>

</html>